<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition>
        <div style="background-color: #cccccc; height: 30px;">
            <div style="text-align: center; color:#ffffff; font-size: 1.3em;">USUARIOS</div>

        </div>
        <p:panel header="Registro de Usuarios" style="border: 0; width: 80%; margin: 0px auto;">
            <h:form id="UsuarioCreateForm">
                <p:growl id="growlCrear" life="3000" /> 
                <h:panelGroup id="display">
                    <h:panelGrid columns="2" border="0" cellspacing="80">
                        <p:graphicImage value="http://montesdeoca.edu.mx/images/usuarios.png" width="180" height="180"/>
                        <h:panelGrid columns="2" border="0">                            
                            <p:outputLabel value="#{bundle.CreateUsuarioLabel_nombres}" for="nombres" />
                            <p:inputText id="nombres" 
                                         value="#{usuarioController.selected.nombres}" 
                                         title="#{bundle.CreateUsuarioTitle_nombres}" 
                                         required="true" 
                                         requiredMessage="#{bundle.CreateUsuarioRequiredMessage_nombres}"/>

                            <p:outputLabel value="#{bundle.CreateUsuarioLabel_apellidos}" for="apellidos" />
                            <p:inputText id="apellidos" 
                                         value="#{usuarioController.selected.apellidos}" 
                                         title="#{bundle.CreateUsuarioTitle_apellidos}" 
                                         required="true"/>

                            <p:outputLabel value="#{bundle.CreateUsuarioLabel_email}" for="email" />
                            <p:inputText id="email" value="#{usuarioController.selected.email}" 
                                         title="#{bundle.CreateUsuarioTitle_email}" 
                                         required="true">
                                <p:ajax event="blur" 
                                        listener="#{usuarioController.validarMail()}"
                                        update="growlCrear"/>
                            </p:inputText>

                            <p:outputLabel value="#{bundle.CreateUsuarioLabel_contrasena}" for="contrasena" />                            
                            <p:inputText id="contrasena" 
                                         type="password" 
                                         value="#{usuarioController.selected.contrasena}" 
                                         title="#{bundle.CreateUsuarioTitle_contrasena}" 
                                         required="true" 
                                         requiredMessage="#{bundle.CreateUsuarioRequiredMessage_contrasena}">
                                <p:ajax event="blur" 
                                        listener="#{usuarioController.validarContrasena()}"
                                        update="growlCrear"/>
                            </p:inputText>

                            <p:outputLabel value="Reingrese Contrasena" for="recontrasena" />
                            <p:inputText id="recontrasena" 
                                         type="password" 
                                         value="#{usuarioController.confirmaContrasena}"
                                         title="#{bundle.CreateUsuarioTitle_contrasena}" 
                                         required="true" 
                                         requiredMessage="#{bundle.CreateUsuarioRequiredMessage_contrasena}">
                                <p:ajax event="blur" 
                                        listener="#{usuarioController.validarConfirmacionContrasena()}"
                                        update="growlCrear"/>
                            </p:inputText>

                            <p:outputLabel value="#{bundle.CreateUsuarioLabel_cargo}" for="cargo" />
                            <p:inputText id="cargo"
                                         value="#{usuarioController.selected.cargo}" 
                                         title="#{bundle.CreateUsuarioTitle_cargo}" />

                            <p:outputLabel value="#{bundle.CreateUsuarioLabel_tipoUsuario}" for="tipoUsuario" />
                            <p:selectOneMenu id="tipoUsuario" 
                                             value="#{usuarioController.selected.tipoUsuario}"
                                             required="true" >
                                <f:selectItem itemLabel="Administrador" itemValue="A" />  
                                <f:selectItem itemLabel="Usuario de Consulta" itemValue="C" /> 
                                <f:selectItem itemLabel="Usuario de Ingreso de Valores" itemValue="I" /> 
                            </p:selectOneMenu>

                        </h:panelGrid>
                    </h:panelGrid>
                    <div style="border: 0; width: 25%; margin: 0px auto;">
                        <p:commandButton actionListener="#{usuarioController.guardar()}" value="#{bundle.Save}"  icon="ui-icon-disk" ajax="false" update="display,growlCrear" />
                        <p:commandButton value="#{bundle.Cancel}" onclick="UsuarioCreateDialog.hide()"/>
                    </div>
                </h:panelGroup>

            </h:form>
        </p:panel >
        <p:panel header="Lista Usuarios" style="border: 0; width: 80%; margin: 0px auto;">
            <ui:include src="listar.xhtml"/>
        </p:panel>
    </ui:composition>

</html>
